<div class="bs-docs-section" ng-controller="TabDemoCtrl">

  <div class="page-header">
    <h1 id="tabs">Tabs <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/tab/tab.js" target="_blank">tab.js</a>
    </h1>
    <code>mgcrea.ngStrap.tab</code>
  </div>

  <h2 id="tabs-examples">Examples</h2>
  <p>Add quick, dynamic tab functionality to transition through panes of local content.</p>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="tab/docs/tab.demo.html" data-content-js-url="tab/docs/tab.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
  <pre class="bs-example-scope">$scope.tabs = {{tabs | json}};
$scope.tabs.activeTab = "{{ tabs.activeTab }}";
  </pre>
  <div class="bs-example" append-source>
    <div class="btn btn-default" ng-click="toggleThirdTab()">
      {{ tabs[2].disabled ? 'Enable' : 'Disable' }} third tab
    </div>
    <div class="btn btn-default" ng-click="tabs.activeTab='Profile'">
      Select "Profile" tab
    </div>
    <hr />
    <!-- bsActivePane is optional -->
    <div bs-active-pane="tabs.activeTab" bs-tabs>
      <div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
      </div>
    </div>
  </div>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>
    <!-- control a tab with bsActivePane binding -->
    <div class="btn-group" ng-model="tabs.activeTab" bs-radio-group>
      <label class="btn btn-default" ng-repeat="tab in tabs">
        <input type="radio" class="btn btn-default" value="{{ $index }}">Tab n°{{ $index + 1 }}
      </label>
    </div>
    <div class="btn btn-default" ng-click="pushTab()">Add new tab</div>
  </div>

  <h2 id="tabs-usage">Usage</h2>
  <p>Append a <code>bs-tabs</code> attribute to any element and several children <code>bs-pane</code> attributes to children elements to enable the directive.</p>

  <div class="callout callout-warning">
    <h4>ngModel binding</h4>
    <p>Using <code>ngModel</code> to bind to the active tab pane index is deprecated and may be removed in future versions, due to issues with validation when using the Tabs directive inside a <code>form</code> element.</p>
    <p>Please use the helper attribute <code>bsActivePane</code> instead.</p>
  </div>

  <div class="callout callout-info row">
    <h4>Custom animations</h4>
    <p>Pane animation is done with the <code>active</code> class and requires custom CSS. You can change the default <code>am-fade</code> animation class by including the <code>animation</code> option.</p>
    <p>Here is a sample definition for the default <code>am-fade</code> animation class:</p>
    <div class="col-md-5">
      <p>LESS:</p>
      <pre class="bs-exemple-code">
        <code class="css" highlight-block>
.tab-pane.am-fade {
  animation-duration: .3s;
  animation-timing-function: ease;
  animation-fill-mode: backwards;
  opacity: 1;

  &.active-remove {
    display: none !important;
  }
  &.active-add {
    animation-name: fadeIn;
  }
}
        </code>
      </pre>
    </div>
    <div class="col-md-5 col-md-offset-1">
      <p>CSS:</p>
      <pre class="bs-exemple-code">
        <code class="css" highlight-block>
.tab-pane.am-fade {
  animation-duration: .3s;
  animation-timing-function: ease;
  animation-fill-mode: backwards;
  opacity: 1;
}

.tab-pane.am-fade.active-remove {
  display: none !important;
}

.tab-pane.am-fade.active-add {
  animation-name: fadeIn;
}
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data attributes or as an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object on
  <code>bs-tabs</code> or <code>bs-pane</code>. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <div class="table-responsive">
    <h4>bs-tabs options</h4>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>Apply a CSS animation to tab panes with <code>ngAnimate</code></td>
        </tr>
        <tr>
          <td>template</td>
          <td>path</td>
          <td>false</td>
          <td>
            <p>If a remote URL is provided, overrides the default template</p>
          </td>
        </tr>
        <tr>
          <td>navClass</td>
          <td>string</td>
          <td>nav-tabs</td>
          <td>
            <p>Classes to be applied to the tab navigation (bootstrap supports <code>nav-pills</code>, <code>nav-stacked</code>)</p>
          </td>
        </tr>
        <tr>
          <td>activeClass</td>
          <td>string</td>
          <td>active</td>
          <td>
            <p>Class to be applied to the animated element</p>
          </td>
        </tr>
      </tbody>
    </table>
    <h4>bs-pane options</h4>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>disabled</td>
          <td>string</td>
          <td>false</td>
          <td>
            <p>Disable pane</p>
          </td>
        </tr>
        <tr>
          <td>name</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>Tab name. If provided, it will be used for `bsActivePane` instead of number</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$tabProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($tabProvider) {
            angular.extend($tabProvider.defaults, {
              animation: 'am-flip-x'
            });
          })
        </code>
      </pre>
    </div>
  </div>

  <h3>Helper attributes</h3>
  <p>Helper attributes can be used together with the directive via data-attributes to support specific functionality. Helper attributes support data binding. To use helper attributes, append the helper attribute name to <code>data-</code>, as in <code>data-bs-active-pane="tabs.activeTab"</code>.</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>bsActivePane</td>
          <td>number</td>
          <td>
            <p>Info about current selected tab. If it has the name, it will be here, otherwise – active tab pane index (zero based).</p>
            <p>You can use it to set the active tab pane from code or to get the currently active tab pane.</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
